<template>
  <div>
    <div class="city-list">
      <ul>
        <li v-for="item in cityList" @click="handleCity">
          <van-image 
            :src="item.cover" 
            fit="cover" 
            width="110"
            height="110"
          />
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <div class="tag-list">
      
      <!-- <van-tag color="#35B76F" size="large" round>巴黎</van-tag> -->
       <van-tag 
          v-for="(item,index) in tagArr" 
          size="large" 
          round
          :plain="!(index==checkIdx)"
          :color="index==checkIdx?'#35B76F':''"
          @click="handleTag(index)"
        >
        {{ item.name }}
       </van-tag>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 数据列表渲染
const cityList = ref([])
axios.get('https://api.xiaodiqiu.cn/api/v1/destination/c0?')
  .then(res=>{
    console.log(res);
    cityList.value = res.data.data
  })

// 逻辑关注点：分类切换逻辑
const tagArr = [
  { "name": "热门", "category": "c0" },
  { "name": "免签", "category": "c1" },
  { "name": "非洲", "category": "c2" },
  { "name": "亚洲", "category": "c3" },
  { "name": "欧洲", "category": "c4" },
  { "name": "大洋洲", "category": "c5" },
  { "name": "北美洲", "category": "c6" },
  { "name": "南美洲", "category": "c7" },
  { "name": "落地签", "category": "c8" }
];
const checkIdx = ref(0) //记录被选中的标签序号
const handleTag = (idx)=>{
  checkIdx.value = idx
  axios.get(`https://api.xiaodiqiu.cn/api/v1/destination/c${idx}?`)
  .then(res=>{
    console.log(res);
    cityList.value = res.data.data
  })
}

//路由跳转
const router = useRouter()
const handleCity = ()=>{
  router.push('/detail')
}

</script>

<style lang="scss" scoped>
.city-list ul{
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  li{
    width: 33.333%;
    text-align: center;
  }
}
.tag-list{
  position: fixed;
  bottom: 50px;
  left: 0;
  width: 100%;
  padding: 20px;
  .van-tag{
    margin:5px 15px;
  }
}
</style>